<template>
	<view >
		<view v-for="(item,index) in items" :key="item.id" style="width: 750upx;">

			<view v-if="item.key === 0"  @click="send(item.id,item.key)">
				<view class="cu-card dynamic  cu-bar bg-white solid-bottom " style="margin-top: 15upx;" :class="isCard?'no-card':''">
					<view class="cu-item shadow">
						<view style="padding-top: 30upx;">
							<view>
                                <view class="flex" style="margin-left: 25upx;">
									<image class="cu-avatar round" :lazy-load="true" :src="item.src"></image>
									<view class="name">
										<view style="font-size: 28upx;padding-top: 10upx;">{{item.name}}</view>
									</view>
								</view>
                                
								<view  style="margin-left: 30upx;font-size:32upx;font-weight: 800;color: #333333;padding-top: 20upx;margin-right: 36.5upx;line-height: 130%;padding-bottom: 10upx;">
                                    <text>{{item.title}}</text>
								</view>
								

								<view class="text-cut" style="padding-left: 30upx;padding-right: 30upx;">
									<text style="font-size:26upx ;color: #333333;">{{item.content}}</text>
								</view> 
      
                                  <view class="image" @tap.stop="previewimage(item.picture)" v-if="item.picture.length == 1">
                                                   <image :lazy-load="true" :src="item.picture[index]" v-for="(itemss,index) in item.picture"
                                                       :key="index" style="margin-right:15upx;border-radius: 15upx;margin-bottom: 10upx;height: 300upx;width: 400upx;"
                                                       mode="aspectFill"> </image>
                                               </view>
                               
                               
                                               <view class="image" @tap.stop="previewimage(item.picture)" v-else-if="item.picture.length == 4 ">
                                                   <image mode="aspectFill" :lazy-load="true" :src="item.picture[index]" v-for="(itemss,index) in item.picture"
                                                       :key="index" style="height: 230upx;margin-right:15upx;width:230upx ; border-radius: 10upx;margin-bottom: 10upx;">
                                                   </image>
                                               </view>
                               <view class="image" @tap.stop="previewimage(item.picture)" v-else>
                                                   <image mode="aspectFill" :lazy-load="true" :src="item.picture[index]" v-for="(itemss,index) in item.picture"
                                                       :key="index" style="height:210upx;margin-right:15upx;width:210upx ; border-radius: 10upx;margin-bottom: 10upx;">
                                                   </image>
                                               </view>
                                
                                
								<view style="display: flex;flex-direction:row;justify-content: space-between ;margin-bottom: 30upx;margin-top: 30upx;padding-left: 40upx;padding-right: 40upx;">
									<view class="centers">
							<image   mode="aspectFill" class="pictures" :class="[item.dianzansrc?'actives':'']"     @click.stop="dianzan(item.id,item.key,index )"></image><text class="textss">点赞{{item.dianzan}}</text> 
									</view>
<!-- @click.stop="dianzan(item.id,item.key,$event) -->
									<view class="center">
<image src="../../static/index/pinglun.png" mode="aspectFill" class="picture"></image><text class="texts">
		评论{{item.pinglun}} </text>
									</view>
									<view class="center">
						<image src="../../static/index/guanzhu.png" mode="aspectFill" class="picture"></image><text class="texts">围观{{item.weiguan}} </text>
									</view>

								</view>
							</view>


						</view>
					</view>

				</view>
			</view>

			<view v-if="item.key === 1" @click="send(item.id,item.key)">

				<view class="cu-card dynamic  cu-bar bg-white solid-bottom " style="margin-top: 15upx;"  :class="isCard?'no-card':''">
					<view class="cu-item shadow">
						<view class="">
							<view style="padding-top: 40upx;padding-bottom: 20upx;">
								<view class="image" @tap.stop="previewimage(item.picture)">
									<image :lazy-load="true" mode="aspectFill" :src="item.picture" style="height: 300upx;width:680upx;">
									</image>
								</view>
								<view  style="margin-left: 36.5upx;padding-top: 20upx;margin-right: 36.5upx;line-height: 130%;padding-bottom: 10upx;">
                                    <text class="text-cut" style="font-size:35upx;font-weight: 800;color: #333333;word-spacing: 10upx;">{{item.content}}</text>
								</view>
							</view>


						</view>
					</view>

				</view>


			</view>

		</view>
        <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
        props:{
           getdate:Number
        },
		data() {
			return {
				isCard: true,
				items:[],
// 				items: [{
// 					key: 0,
// 					data: 50,
// 					src: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
// 					picture: [
// 						"https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
// 						"https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png"
// 					],
// 					content: "LALA你好",
// 					name: "张三",
// 					title: "叫LALA吧",
// 					dianzan: 0,
// 					pinglun: 0,
// 					weiguan: 0,
// 					id: ""
// 				}, {
// 					key: 1,
// 					data: 50,
// 					picture: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
// 					title: "叫LALA吧",
// 					dianzan: 0,
// 					pinglun: 0,
// 					fenxiang: 0,
// 					id: ""
// 				}, {
// 
// 					key: 0,
// 					data: 50,
// 					src: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
// 					picture: ["https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png"],
// 					content: "LALA你好",
// 					name: "张三",
// 					title: "叫LALA吧",
// 					dianzan: 0,
// 					pinglun: 0,
// 					weiguan: 0,
// 					id: ""
// 				}]
               loadMoreText: "加载中...",
              showLoadMore: false,
              max:0,
              id:"",
              pageNum:1,
			}
		},
		methods: {
			previewimage(src){
                
                   let srcs = []
                     
                if(typeof src == "string"){
                    srcs[0] = src
                    
                }else{
                    srcs = src
                }
			              
			                uni.previewImage({
			           urls: srcs,
			           indicator:"default",
			           loop:true,
			           success() {
			               console.log("图片打开成功")
			           }
			       });         
			          }, 
			getdata(c,paixu = 0) {
 
          let pageNum = c.pageNum;
          
          
          this.$api.test({
              url:"setgoals/GetConsult",
              data:{
                  pageNum:pageNum,
                  pageLimit:8,
                  type:1
              }
          }).then((res) =>{
             
            
             
             						let x = res.data;
             						
             						// for(let d = 0 ;d< x.length;d++){
             						// 	
             						// 	console.log(x[d].type)
             						// }
                                        
                                     if(x.length == 0) {
                                         c.max = 1;
                                         return 
                                     }  
                                        
             						var a = {};
             						var b = [];
             						var index = x.length-1;
             
             						for (var i  = 0; i < x.length; i++) {
             
             							if (x[i].type === "goal") {
             
             								a.id = x[i].iD;
             								a.picture = x[i].picture;
             								a.name = x[i].postUsername;
             								a.title = x[i].subtitle;
             								a.key = 0;
             								a.src = x[i].postHeadPortrait;
             								a.content = x[i].message;
             								a.dianzan = x[i].thumbs;
             							a.weiguan = x[i].circuessNum;
             							a.pinglun = x[i].commentNum;
                                         a.dianzanjude = 0;
                                         a.dianzansrc = false;
                                                         
             							} 
             							 
             							 if (x[i].type === "consult") {
             
             								a.id = x[i].iD;
             								a.picture = x[i].picture[0]
             								a.title = x[i].message;
             								a.key = 1;
             								a.src = x[i].postHeadPortrait;
             								a.content = x[i].subtitle;
             								a.dianzan = x[i].thumbs;
             								a.fenxiang = x[i].circuessNum;
             								a.pinglun = x[i].commentNum;
                                              a.dianzanjude = 0;
                                               a.dianzansrc = false ;
             							}
             							
             							console.log(JSON.stringify(a));
                                         
                                         
             							
             							b.unshift(JSON.parse(JSON.stringify(a)));
             							
             						}
             
             						if(paixu == 0){
                                         	c.items = b.concat(c.items);
                                     }else{
                                         c.items = c.items.concat(b);
                                     }
          })
          .catch((err) =>{
              
              if(err.statusCode == 500){
                   uni.showToast({
                      title: '数据获取失败',
                      duration: 2000,
                      icon:"none",
                      position:"center"
                      
                  });
                  return;
              }
              
          })
          
          
          
          
          
 
// 				uni.request({
//                    url:'http://07cr7.live:8994/GetConsult',
//                    data:{
//                        pageNum:pageNum,
//                        pageLimit:8,
//                        type:1
//                    },    
// 				   method:"GET",
// 					 success: (res) =>{

// if(res.data.status == 500){
//      uni.showToast({
//         title: '数据获取失败',
//         duration: 2000,
//         icon:"none",
//         position:"center"
        
//     });
//     return;
// }

// 						let x = res.data;
						
// 						// for(let d = 0 ;d< x.length;d++){
// 						// 	
// 						// 	console.log(x[d].type)
// 						// }
                           
//                         if(x.length == 0) {
//                             c.max = 1;
//                             return 
//                         }  
                           
// 						var a = {};
// 						var b = [];
// 						var index = x.length-1;

// 						for (var i  = 0; i < x.length; i++) {

// 							if (x[i].type === "goal") {

// 								a.id = x[i].iD;
// 								a.picture = x[i].picture;
// 								a.name = x[i].postUsername;
// 								a.title = x[i].subtitle;
// 								a.key = 0;
// 								a.src = x[i].postHeadPortrait;
// 								a.content = x[i].message;
// 								a.dianzan = x[i].thumbs;
// 							a.weiguan = x[i].circuessNum;
// 							a.pinglun = x[i].commentNum;
//                             a.dianzanjude = 0;
//                             a.dianzansrc = false;
                                            
// 							} 
							 
// 							 if (x[i].type === "consult") {

// 								a.id = x[i].iD;
// 								a.picture = x[i].picture[0]
// 								a.title = x[i].message;
// 								a.key = 1;
// 								a.src = x[i].postHeadPortrait;
// 								a.content = x[i].subtitle;
// 								a.dianzan = x[i].thumbs;
// 								a.fenxiang = x[i].circuessNum;
// 								a.pinglun = x[i].commentNum;
//                                  a.dianzanjude = 0;
//                                   a.dianzansrc = false ;
// 							}
							
// 							console.log(JSON.stringify(a));
                            
                            
							
// 							b.unshift(JSON.parse(JSON.stringify(a)));
							
// 						}

// 						if(paixu == 0){
//                             	c.items = b.concat(c.items);
//                         }else{
//                             c.items = c.items.concat(b);
//                         }
						
// // 						uni.setStorage({
// //     key: 'data',
// //     data: c.items,
// //     success: function () {
// //         console.log('success');
// //     }
// // });
											 
// 					},
//                     fail() {
//                     	 uni.showToast({
//                     	    title: '网络无法连接，请检查设置',
//                     	    duration: 2000,
//                     	    icon:"none",
//                     	    position:"center"
                    	    
//                     	});
//                     }
// 				})
                
                c.pageNum++;    
                
                // uni.setStorage({
                //     key: 'datapagenum',
                //     data: c.pageNum,
                //     success: function () {
                //         console.log('success');
                //     }
                // });

			},
			send(id,key){
				
					console.log(id);
				console.log(key);
				
				if(key === 0){
				     
					 uni.navigateTo({
					 url:"../../pages/goal/goal?id="+id+"&key=goal"
					 })
				}
					if(key === 1){
					
				 	uni.navigateTo({
				 url:"../../pages/consult/consult?id="+id+"&key=consult"
				 })
					
				}			
			},
            
            dianzan(id,type,index){
                
               var c = this; 
                
        if(type==1) {
               
            if(this.items[index].dianzanjude === 0){
               
              this.dianzans(id,"consult","0",function(data){
                console.log(data)
                if(data.status === "easyui"){
                    
                    var x = c.items[index] ;
                   x.dianzan = data.thumb;
                    x.dianzansrc = true;
                 x.dianzanjude =1;
                    c.items.splice(index, 1, x);
                     
                     	uni.setStorage({
                         key: 'data',
                         data: c.items,
                         success: function () {
                             console.log('success');
                         }
                     });                    
                }
            })
               
                   
            }  
        else{
            this.dianzans(id,"consult","1",function(data){
              
              if(data.status === "easyui"){
                  
                  var x = c.items[index] ;
                 x.dianzan = data.thumb;
                  x.dianzansrc = false;
              x.dianzanjude = 0;
                  c.items.splice(index, 1, x);
                   
                   	uni.setStorage({
                       key: 'data',
                       data: c.items,
                       success: function () {
                           console.log('success');
                       }
                   });                    
              }
          })
        }    
        
}

     if(type==0 ){
        if(this.items[index].dianzanjude === 0){
             this.dianzans(id,"goal","0",function(data){
               
               if(data.status === "easyui"){
                   
                   var x = c.items[index] ;
                  x.dianzan = data.thumb;
                   x.dianzansrc = true;
                   x.dianzanjude =1;
               
                   c.items.splice(index, 1, x);
                    
                    	uni.setStorage({
                        key: 'data',
                        data: c.items,
                        success: function () {
                            console.log('success');
                        }
                    });                    
               }
           }) 
        }
        if(this.items[index].dianzanjude === 1){
              this.dianzans(id,"goal","1",function(data){
                console.log(data)
                if(data.status === "easyui"){
                    
                    var x = c.items[index] ;
                   x.dianzan = data.thumb;
                    x.dianzansrc = false;
                 x.dianzanjude =0;
                    c.items.splice(index, 1, x);
                     
                     	uni.setStorage({
                         key: 'data',
                         data: c.items,
                         success: function () {
                             console.log('success');
                         }
                     });                    
                }
            })
            
        }
            }

},
 dianzans(id,type,jude,yingyong){
     
     
     this.$api.test({
         url: 'setgoals/SetThumb', //仅为示例，并非真实接口地址。
         data: {
            id:id,
            type: type,
            jude: jude
         }
     }).then((res) =>{
        
       
        yingyong(res.data)
         
     }).catch((err)=>{
         uni.showToast({
             title: '网络无法连接，请检查设置',
             duration: 2000,
             icon:"none",
             position:"center"
             
         });
         
         
     })
     
   
     }
		},
        watch:{
           getdate:function(newQuestion, oldQuestion){
               
                this.$emit('reachdate')   
               
              if(this.getdate == 1){
             
              
              if (this.max == 1) {
             		this.loadMoreText = "没有更多数据了!"
                      this.showLoadMore = true;
             		return;
             	}         
               this.showLoadMore = true;
               
             setTimeout(() => {
             		this.getdata(this,1); 
             	}, 300);    
          } 
            
           }
        },
		 beforeMount(){
// 					uni.getStorage({
//     key: 'data',
//     success:  (res) =>{
//        this.items = res.data;
//     },
// 	fail: () => {
// 		console.log("还没存数据");
// 		this.getdata(this); 
// 	}
// });
this.getdata(this); 
// uni.getStorage({
//     key: 'datapagenum',
//     success:  (res) =>{
//        this.pageNum = res.data;
//     },
// 	fail: () => {
// 		console.log("还没存数据");
// 	}
// });
		},
		mounted() {
            
  uni.$on('data',(data) =>{
       if(data.msg = "获取数据"){ 
		   this.getdata(this);
		     console.log("获取数据了")
	   }  
	 
    })
		}
	}
</script>

<style>
    page{
        background-color:#f7f6fc;
    }
	.picture {
		width: 40upx;
		height: 40upx;

	}

	.texts {
		color: #333333;
		margin-left: 15upx;
	}
    .textss{
        color: #333333;
        margin-left: 15upx;
        font-size: 26upx;
    }

	.center {
		display: flex;
		align-items: center;
		width: 141upx;
	}
    .centers{
        display: flex;
        align-items: center;
        width: 160upx;
    }

	.flex {
		display: flex;
		flex-direction: row;
		margin-left: 36.5upx;
	}

	.name {
		margin-left: 20upx;
		color: #999999;
	}

	.text {
		color: #33333;
		margin-left: 36.5upx;
		margin-top: 20upx;
		font-size: 18px;
		margin-bottom: 10upx;
		line-height: 120%;
        padding-right: 36.5upx;
	}

	.image {
		margin-left: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 690upx;
        flex-wrap: wrap;
	}
    .pictures{
        width: 40upx;
        height: 40upx;
        background: url("../../static/index/aixin.png");
			background-size: contain;     /* 包含:图片成比例放大,可能不会填满盒子。可用于适配  */
      
    }
    .actives{
           width: 40upx;
        height: 40upx;
        background: url("../../static/index/dizan.png");
        	background-size: contain;     /* 包含:图片成比例放大,可能不会填满盒子。可用于适配  */
        
    }
</style>
